 <gm:page title="London Map and Phone Directory" authenticate="false">
    <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>

     <style type="text/css">
      @import url(http://wwww.google.com/uds/css/gsearch.css);

      body *, table *,
      body {
        font-family: "trebuchet ms", verdana, sans-serif;
        font-size: 13px;
      }

      #header { margin-top: 4px; }
      #search_control { margin-top: 4px; }

      .gsc-ad-box .gsc-keeper {
        display : none;
      }

      h1 {
        font-size : 16px;
        font-weight : bold;
        background-color : #f9f9f9;
        border-top : 1px solid #676767;
        text-align : center;
        margin-bottom : 10px;
        color : #676767;
      }

      h1 .tagline {
        font-size : 13px;
        font-weight : normal;
      }

      .sb-result {
        border-collapse : collapse;
        border : 1px solid #f9f9f9;
        color : #676767;
      }

      .sb-result td {
        vertical-align : top;
        border : 1px solid #f9f9f9;
        padding-left : 4px;
        padding-right : 4px;
      }

      td.sb-row {
        width : 20px;
        text-align : center;
        color : #676767;
        font-weight : normal;
        background-color : #f9f9f9;
      }

      td.sb-title {
        width : 200px;
      }

      td.sb-address {
        width : 300px;
      }

      td.sb-phone {
        color : green;
        width : 100px;
      }

      td.sb-date {
        width : 150px;
      }

      #header td {
        background-color : #f9f9f9;
        text-align : center;
      }
      #header td.sb-phone {
        color : #676767;
      }

      #row1 td {
        text-align : center;
      }
      #row1 td.sb-header {
        font-size : 16px;
        width : 618px;
      }

      #row1 td.sb-viewmap {
        vertical-align : bottom;
        font-size : 13px;
        width : 150px;
        cursor : pointer;
        text-decoration : underline;
        font-weight : normal;
        color : green;
      }

      #dataheader td {
        text-align : left;
        color : blue;
        font-weight : bold;
        margin-bottom : 6px;
      }

      #dataheader td.sb-row {
        text-align : center;
        color : #676767;
        font-weight : normal;
      }

      #dataheader span.sb-attribution {
        font-size : 11px;
        color : #676767;
        font-weight : normal;
      }

      div.visible {
        display : block;
      }

      div.invisible {
        display : none;
      }

      #lead_map {
        border : 1px solid #676767;
        width : 777px;
        height : 400px;
        margin-top : 8px;
      }

    </style>

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR5gtrmyCGQrJBr6A0k4RiBRTG-X0kMqAs8jvDJ_0glfT0e6oqRT3uQaImt4EcNf1Dy97WL4NSnpXYQ" type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAR5gtrmyCGQrJBr6A0k4RiBRTG-X0kMqAs8jvDJ_0glfT0e6oqRT3uQaImt4EcNf1Dy97WL4NSnpXYQ" type="text/javascript"></script>

    <script language="Javascript" type="text/javascript">//<![CDATA[

      
var leads = new Array();
      var leadMarkers = new Array();
      var scDiv = null;
      function OnLoad() {

        //loadCss("green");

        scDiv = document.getElementById("search_control");
        var vm = document.getElementById("viewMap");
        vm.onclick = method_closure(this, MyViewMap, []);

        var vmt = document.getElementById("vmt");
        vmt.innerHTML = "";

        var resultsDiv = document.getElementById("saved_results");
        removeChildren(resultsDiv);

        // create a search control
        var searchControl = new GSearchControl();
        var ls = new GlocalSearch();        ls.setCenterPoint("Westminster, SW1A 1BA");

        var options = new GsearcherOptions();
        options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
        searchControl.addSearcher(ls, options);

        // establish a keep callback
        searchControl.setOnKeepCallback(this, MyKeepHandler, "add to spreadsheet");

        // tell the searcher to draw itself and tell it where to attach

        searchControl.draw(scDiv);

        // execute an inital search
        searchControl.execute("Emergency Services");
      }

      var gmap;
      var mapVisible = false;
      function MyViewMap() {
        var vmt = document.getElementById("vmt");
        var mapDiv = document.getElementById("lead_map");
        var resultsDiv = document.getElementById("saved_results");
        if (leads.length > 0) {
          if (mapVisible) {
            cssSetClass(resultsDiv, "visible");
            cssSetClass(mapDiv, "invisible");
            vmt.innerHTML = "view map";
            mapVisible = false;
          } else {
            cssSetClass(resultsDiv, "invisible");
            cssSetClass(mapDiv, "visible");
            vmt.innerHTML = "hide map";
            mapVisible = true;

            //
            // now, create a map and set of markers
            //
            drawMap(null);
          }
        }
      }

      function drawMap(addThisResult) {
        var mapDiv = document.getElementById("lead_map");
//
        // now, create a map and set of markers
        //
        if (addThisResult == null) {
          removeChildren(mapDiv);
          gmap = new GMap(mapDiv);
          gmap.addControl(new GSmallMapControl());
          gmap.addControl(new GMapTypeControl()); 
          gmap.centerAndZoom(new GPoint(51.5,-0.117), 13);
          GEvent.bind(gmap, "click", this, MyOnMapClick);          
                
          
          leadMarkers = new Array();
          var firstPoint = null;
          for (var i=0; i < leads.length; i++) {

            // grab the result object
            var lead = leads[i];
            var point = new GPoint(parseFloat(lead.lng), parseFloat(lead.lat));
            if (firstPoint == null) {
              firstPoint = point;
            }
            var marker = new GMarker(point);
            marker._lead_ = lead;
            leadMarkers.push(marker);
            gmap.addOverlay(marker);
          }
          gmap.centerAndZoom(firstPoint, 4);
        } else {
          gmap.closeInfoWindow();
          var thispoint = new GPoint(parseFloat(addThisResult.lng), parseFloat(addThisResult.lat));
          var thismarker = new GMarker(thispoint);
          thismarker._lead_ = addThisResult;
          leadMarkers.push(thismarker);
          gmap.addOverlay(thismarker);
          //gmap.recenterOrPanToLatLng(thispoint);
          MyOnMapClick(thismarker,null);
        }
      }

      MyOnMapClick = function(marker, point) {
        if (marker) {
          var lead = marker._lead_;
          var node = lead.html.cloneNode(true);
          var div = createDiv(null, "gs-infoWindow");
          div.appendChild(node);
          marker.openInfoWindow(div);
        }
      }

      var rowCounter = 3;
      function MyKeepHandler(result) {

        if (rowCounter == 3) {
          var vmt = document.getElementById("vmt");
          vmt.innerHTML = "view map";
        }

        var t = createTable("sb-result");
        var tr = createTableRow(t);
        var rowCell = createTableCell(tr,"sb-row");
        var titleCell = createTableCell(tr,"sb-title");
        var addressCell = createTableCell(tr,"sb-address");
        var phoneCell = createTableCell(tr,"sb-phone");
        var dateCell = createTableCell(tr,"sb-date");

        var str = rowCounter++;
        rowCell.innerHTML = str;

        str = "<a href='"+result.url+"' target='_blank'>" + result.titleNoFormatting + "</a>";
        titleCell.innerHTML = str;

        str = result.streetAddress + ", " + result.city + " " + result.region;
        addressCell.innerHTML = str;

        if (result.phoneNumbers && result.phoneNumbers.length > 0) {
          str = result.phoneNumbers[0].number;
        } else {
          str = "unknown";

} phoneCell.innerHTML = str; dateCell.innerHTML = compactDateString();
// attach it var savedResults =
document.getElementById("saved_results"); savedResults.appendChild(t);
leads.push(result); if (mapVisible) { drawMap(result); } } function
method_closure(object, method, opt_argArray) { return function() {
return method.apply(object, opt_argArray); } } function
removeChildren(parent) { while (parent.firstChild) {
parent.removeChild(parent.firstChild); } } function cssSetClass(el,
className) { el.className = className; } function createDiv(opt_text,
opt_className) { var el = document.createElement("div"); if (opt_text)
{ el.innerHTML = opt_text; } if (opt_className) { el.className =
opt_className; } return el; } function createTable(opt_className) { var
el = document.createElement("table"); if (opt_className) { el.className
= opt_className; } return el; } function createTableRow(table) { var tr
= table.insertRow(-1); return tr; } function createTableCell(tr,
opt_className) { var td = tr.insertCell(-1); if (opt_className) {
td.className = opt_className; } return td; } function loadCss(color) {
var head = document.getElementsByTagName("head")[0]; var css =
document.createElement("link"); var href =
"http://wwww.google.com/uds/gsearch_" + color + ".css"; css.href =
href; css.rel = "stylesheet"; css.type = "text/css";
head.appendChild(css); } compactDateString = function() { var t = new
Date(); var str = t.getMonth()+1 + "/" + t.getFullYear(); return str; }
GSearch.setOnLoadCallback(OnLoad); //]]> </script>
<body> <h1>London Phone List -Find A Business, Services,
Maps, Directions and Much More<br></h1> <center><script
type="text/javascript"><!--
google_ad_client = "pub-5366634465364952";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
//2007-10-19: Phone List
google_ad_channel = "7156389979";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "333333";
google_color_url = "008000";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center> <table width="100%"> <tr> <td
valign="top" width="850px"> <table id="header"
class="sb-result"> <td class="sb-row"></td> <td
class="sb-title">A</td> <td
class="sb-address">B</td> <td
class="sb-phone">C</td> <td class="sb-date">D</td>
</table> <table id="row1" class="sb-result"> <td
class="sb-row">1</td> <td class="sb-header">My London
List</td> <td class="sb-viewmap" id="viewMap"><span
id="vmt">view map</span></td> </table> <table
id="dataheader" class="sb-result"> <td
class="sb-row">2</td> <td
class="sb-title">Name</td> <td
class="sb-address">Address</td> <td
class="sb-phone">Phone</td> <td class="sb-date">Date
<span class="sb-attribution">(clipped from
Google)</span></td> </table> <div
id="saved_results" class="visible">Saved Results</div> <div
id="lead_map" class="invisible">Map</div> </td> <td
valign="top" width="300px"> <div id="search_control"/>
</td> </tr> </table><span
class="tagline">powered by The Google AJAX Search API- Developer:
<a
href="http://www.google.com/s2/profiles/113526684512906810710?zx=keu2dofpq7q6">Sam
Mbale</a></span> </body> </gm:page>











